<template>
  <AppLayout>
    <!-- 一级分类页面-->
    <div class="container">
      <XtxBread>
        <XtxBreadItem path="/">首页</XtxBreadItem>
        <transition name="fade-right" mode="out-in">
          <XtxBreadItem :key="topCategory?.id">{{
            topCategory?.name
          }}</XtxBreadItem>
        </transition>
      </XtxBread>

      <XtxCarousel
        v-if="banners"
        :carousels="banners"
        :autoPlay="true"
        :style="{ height: `500px` }"
      />

      <show-sub-category-list
        :subCategoryList="topCategory.children"
        v-if="topCategory"
      ></show-sub-category-list>

      <RecommendGoods />
    </div>
  </AppLayout>
</template>

<script>
import AppLayout from "@/components/AppLayout";
import XtxBread from "@/components/library/XtxBread";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { computed } from "vue";
import useBanners from "@/hooks/useBanners";
import XtxCarousel from "@/components/library/XtxCarousel";
import ShowSubCategoryList from "@/views/categroy/components/showSubCategoryList";
import RecommendGoods from "@/views/categroy/components/RecommendGoods";

export default {
  name: "TopCategoryPage",
  components: {
    RecommendGoods,
    ShowSubCategoryList,
    XtxCarousel,
    XtxBread,
    AppLayout,
  },
  setup() {
    const { list: topCategory } = useCategory();
    // 获取轮播图数据  banners:轮播图数据 getData轮播图数据方法
    const { banners, getData } = useBanners();
    getData(2);

    return { topCategory, banners };
  },
};

function useCategory() {
  // 获取store 对象
  const store = useStore();

  // 获取route对象
  const route = useRoute();

  // 动态获取对应的数据
  const list = computed(() => {
    return store.state.category.list.find(
      // id从路由参数中获取
      (item) => item.id === route.params.id
    );
  });

  return {
    list,
  };
}
</script>
